<template>
 <view class="card">
  <view class="bank" :style="{background:bank.background}" v-if="flag" @click="alteration">
  	<view class="icon" :style="{background:bank.color}">
  			<image :src="bank.icon" mode="" class="img"></image>
  	</view>
	<view class="left">
		<view class="name">{{bank.name}}</view>
		<view class="deposit" :style="{color:bank.color}">储蓄卡</view>
		 <view class="bank_card">{{bank.bank_card}}</view>
	</view>
  </view>
  <view v-else>
  	<view class="formData">
  		<formData :values="bankValues" :actionSheetList="bankList" :fields="bankFields" :rules="bankRules" ref="FormData" labelAlign="left">
  		</formData>
  	</view>
	<view class="submit" @click="submit">
		提交
	</view>
  </view>
 </view>
</template>

<script>
	import {mapState,mapMutations,mapActions} from 'vuex'
	import formData from '@/components/form/index'
 export default {
   data () {
     return {
       
     }
   },
   components: {
formData
   },
   methods: {
   ...mapActions({
	   getbankData:'PERSONAL/GET_BANK_DATA',
	   confirmDebit:'PERSONAL/CONFIRM_DEBIT',
	   getbankInfo:'PERSONAL/GET_BANK_INFO',
   }),
   alteration(){
	   // this.flag=false
	   // this.getbankData()
   },
   submit(){
	   let flag =this.$refs.FormData.submit()
	   if(flag){
		 this.confirmDebit() 
	   }
	   
   }
   },
   mounted() {

   this.getbankInfo()
   },
   watch: {

   },
   computed: {
    ...mapState({
		bank:(state)=>state.PERSONAL.bank,
		bankValues:(state)=>state.PERSONAL.bankValues,
		bankFields:(state)=>state.PERSONAL.bankFields,
		bankRules:(state)=>state.PERSONAL.bankRules,
		bankList:(state)=>state.PERSONAL.bankList,
		flag:(state)=>state.PERSONAL.flag,
	})
   }
 }
</script>

<style scoped lang='scss'>
@import '@/common/management.scss';
</style>